<template>
  <div class="order-details">
    <!-- 订单详情nav -->
     <div class="order-details-nav">
      <van-nav-bar
        title="订单详情"
        left-arrow
        @click-left="$router.go(-1)"
      />
     </div>
     <!-- 订单详情内容 -->
    <div class="order-details-content">
      <div class="order-details-content-header">
        <img src="@/assets/imgs/wait_deliver.png" alt="">
        <h3>{{orderDetailItems.state_text}}</h3>
      </div>
      <div class="position-relative">
        <div class="order-details-content-address">
          <div class="odca-top fontSize-16 mb-1"><span class="me-1">{{ address.name }}</span><span>{{address.phone}}</span></div>
          <div class="text-muted fontSize-14">{{ addressLong }}</div>
        </div>
        <div class="order-details-content-list">
          <div class="odcl-item" v-for="(item,index) in goodsList" :key="index">
            <van-card
              :num="item.total_num"
              :price="item.total_price"
              :title="item.goods_name"
              :thumb="item.goods_image"
            />
          </div>
        </div>
        <div class="order-details-content-time">
          <div class="d-flex justify-content-start align-items-center mb-1">
            <span class="text-black-50 fontSize-14 m-r_10">订单编号</span><span class="fontSize-16 m-r_10">{{orderDetailItems.order_no}}</span>
            <button type="button" class="btn btn-outline-secondary btn-sm">复制</button>
          </div>
          <div class="d-flex justify-content-start align-items-center mb-1">
            <span class="text-black-50 fontSize-14 m-r_10">下单时间</span><span class="fontSize-16">{{orderDetailItems.create_time}}</span>
          </div>
          <div class="d-flex justify-content-start align-items-center">
            <span class="text-black-50 fontSize-14 m-r_10">买家留言</span><span class="fontSize-14 text-ellipsis">{{orderDetailItems.buyer_remark || '--'}}</span>
          </div>
        </div>
        <div class="order-details-content-price">
          <div class="d-flex justify-content-between align-items-center mb-1">
            <span class="text-black-50 fontSize-14">商品总价</span><span class="fontSize-16">￥{{orderDetailItems.total_price}}</span>
          </div>
          <div class="d-flex justify-content-between align-items-center">
            <span class="text-black-50 fontSize-14">运费</span><span class="fontSize-16">+￥{{orderDetailItems.express_price}}</span>
          </div>
          <van-divider />
          <div class="d-flex justify-content-end align-items-center">
            <span class="fontSize-14 me-2">实付款</span><span class="fontSize-16 text-danger">￥{{orderDetailItems.total_price}}</span>
          </div>
        </div>
      </div>

    </div>
    <!-- 订单详情页脚 -->
    <div class="order-details-footer">
      <div class="d-flex justify-content-end align-items-center">
        <div class="order-list-btn">
            <div v-if="orderDetailItems.order_status === 10">
              <button v-if="orderDetailItems.pay_status === 10" class="btn btn-sm btn-outline-danger" >立即付款</button>
              <button v-else-if="orderDetailItems.delivery_status === 10" class="btn btn-sm btn-outline-secondary" >申请取消</button>
              <button v-else-if="orderDetailItems.delivery_status === 20 || orderDetailItems.delivery_status === 30" class="btn btn-sm btn-outline-danger">确认收货</button>
            </div>
            <div v-if="orderDetailItems.order_status === 30">
              <button class="btn btn-sm btn-outline-info">评价</button>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { orderDetail } from '@/api/order'
export default {
  name: 'orderDetails',
  data () {
    return {
      orderId: '',
      orderDetailItems: {},
      address: {},
      goodsList: []
    }
  },
  async created () {
    this.orderId = this.$route.query.orderId
    await this.getOrderDetail()
  },
  computed: {
    addressLong () {
      return this.address.region.province + this.address.region.city + this.address.region.region + this.address.detail
    }
  },
  methods: {
    async getOrderDetail () {
      const { data: { order } } = await orderDetail(this.orderId)
      this.orderDetailItems = order
      this.address = order.address
      this.goodsList = order.goods
      console.log(this.orderDetailItems)
    }
  }
}
</script>

<style scoped lang="less">
  .order-details {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    .order-details-nav{
      width: 100%;
      height: 46px;
      position: fixed;
      z-index: 999;
      top: 0px;
      flex: 0;
      ::v-deep(.van-nav-bar){
        &:after { // 去除两组件之间的分割白线
        border-bottom-width: 0 !important;
      }
      }
      ::v-deep(.van-nav-bar__content){
        background-color: #ff0036;
        .van-nav-bar__left{
         .van-icon {
           color: #fff;
           font-weight: bold;
         }
        }
        .van-nav-bar__title{
           color: #fff;
           font-weight: bold;
        }
      }
    }
    .order-details-content{
      flex: 1 1 auto;
      margin-top: 46px;
      margin-bottom: 10px;
      background-color: #f5f5f5;
      .order-details-content-header{
        height: 200px;
        width: 100%;
        background-color: #ff0036;
        display: flex;
        padding: 40px 22px 0 22px;
        img{
          width: 25%;
          height: 50%;
          object-fit: contain;
        }
        h3{
          color: #fff;
          font-size: 24px;
          font-weight: bolder;
          margin-left: 10px;
          margin-top:8%;
        }
      }
      .position-relative{
        position: relative;
        padding: 0 16px;
        bottom: 40px;
        .order-details-content-address{
          padding: 14px 14px;
          display: flex;
          flex-direction: column;
          background-color: #fff;
          box-shadow: 0 1px 3px 0 rgba(0,0,0,.05);
          border-radius: 14px;
          margin-bottom: 10px;
        }
        .order-details-content-list{
          box-shadow: 0 1px 3px 0 rgba(0,0,0,.05);
          width: 100%;
          height: 100%;
          background: #fff;
          margin-bottom: 10px;
          border-radius:14px !important;
          overflow: hidden;
          .odcl-item{
            ::v-deep(.van-card){
              border-radius: inherit;
              overflow: hidden;
              background-color: #fff;
              .van-card__content{
                padding: 6px 0;
                .van-card__title {
                  font-size:16px ;
                }
                .van-card__bottom{
                  font-size: 14px;
                }
              }
            }
          }
        }
        .order-details-content-time{
          background-color: #fff;
          box-shadow: 0 1px 3px 0 rgba(0,0,0,.05);
          border-radius: 14px;
          padding: 14px 14px;
          margin-bottom: 10px;
          display: flex;
          flex-direction: column;
          .btn{
            width: 50px;
            font-size: 12px;
            padding: 2px 5px;
            border-radius: 20px;
          }
        }
        .order-details-content-price{
          background-color: #fff;
          box-shadow: 0 1px 3px 0 rgba(0,0,0,.05);
          border-radius: 14px;
          padding: 14px 14px;
          margin-bottom: 10px;
          display: flex;
          flex-direction: column;
          .van-divider{
            margin: 12px 0;
          }
        }
      }
    }
    .order-details-footer{
      width: 100%;
      height: 50px;
      padding: 0 16px;
      background-color: #fff;
      position: fixed;
      bottom: 0;
      z-index: 999;
      display: flex;
      justify-content: end;
      align-items: center;
      .btn{
        border-radius: 20px;
        font-size: 14px;
      }
    }
  }
</style>
